<template>
  <div>
    <div ref="chartVal" class="lines_chart"></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import 'echarts-gl';
const chartVal = ref(null);
let chart = null;

onMounted(() => {
  initChart();
});

onBeforeUnmount(() => {
  if(chart) {
    chart.dispose();
  }
})

const initChart = () => {
  chart = echarts.init(chartVal.value, 'macarons');
  chart.clear();
  let option = {
    backgroundColor: '#141936',
    title: {
      text: '路径图'
    },
    tooltip: {

    },
    xAxis: {
      show: true,
      type: 'value',
      min: 0,
      max: 1200,
    },
    yAxis: {
      show: true,
      type: 'value',
      min: 0,
      max: 600
    },
    series: [
      {
        type: 'lines',
        coordinateSystem: 'cartesian2d',
        polyline: false,
        animation: false,
        silent: true,
        // progressive: 200,
        // progressiveThreshold: 500,
        z: 1,
        zlevel: 3,
        lineStyle: {
          width: 1,
          type: 'solid',
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgb(57,71,105, .01)' },
            { offset: 1, color: 'rgb(57,71,105, .6)' }
          ]),
          cap: 'round',
          curveness: 0.2,
        },
        effect: {
          show: true,
          symbol: 'circle',
          symbolSize: 4,
          period: 6,
          delay: 0,
          // constantSpeed: 100,
          color: '#fff',
          trailLength: 0.1,
        },
        data: [
          {
            coords: [
              [50, 500],
              [1000, 150]
            ],
            lineStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(255,255,255,.01)' },
                { offset: 1, color: 'rgba(255,255,255,.6)' }
            ])
            }
          },
          {
            coords: [
              [50, 500],
              [900, 500]
            ],
          },
          {
            coords: [
              [50, 550],
              [1000, 350]
            ]
          },
          {
            coords: [
              [50, 400],
              [1000, 150]
            ]
          }
        ]
      },
      {
        type: 'lines',
        coordinateSystem: 'cartesian2d',
        polyline: false,
        animation: false,
        silent: true,
        // progressive: 200,
        // progressiveThreshold: 500,
        z: 1,
        zlevel: 3,
        lineStyle: {
          width: 0,
          type: 'solid',
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgb(57,71,105, .01)' },
            { offset: 1, color: 'rgb(57,71,105, .6)' }
          ]),
          cap: 'round',
          curveness: 0.2,
        },
        effect: {
          show: true,
          symbol: 'circle',
          symbolSize: 4,
          period: 6,
          delay: 2000,
          // constantSpeed: 100,
          color: '#fff',
          trailLength: 0.1,
        },
        data: [
          {
            coords: [
              [50, 500],
              [1000, 150]
            ],
            lineStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(255,255,255,.01)' },
                { offset: 1, color: 'rgba(255,255,255,.6)' }
              ])
            }
          },
          {
            coords: [
              [50, 500],
              [900, 500]
            ],
          },
          {
            coords: [
              [50, 550],
              [1000, 350]
            ]
          },
          {
            coords: [
              [50, 400],
              [1000, 150]
            ]
          }
        ]
      },
      {
        type: 'lines',
        coordinateSystem: 'cartesian2d',
        polyline: false,
        animation: false,
        silent: true,
        // progressive: 200,
        // progressiveThreshold: 500,
        z: 1,
        zlevel: 3,
        lineStyle: {
          width: 0,
          type: 'solid',
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgb(57,71,105, .01)' },
            { offset: 1, color: 'rgb(57,71,105, .6)' }
          ]),
          cap: 'round',
          curveness: 0.2,
        },
        effect: {
          show: true,
          symbol: 'circle',
          symbolSize: 4,
          period: 6,
          delay: 4000,
          // constantSpeed: 100,
          color: 'red',
          trailLength: 0.1,
        },
        data: [
          {
            coords: [
              [50, 500],
              [1000, 150]
            ],
            lineStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(255,255,255,.01)' },
                { offset: 1, color: 'rgba(255,255,255,.6)' }
              ])
            }
          },
          {
            coords: [
              [50, 500],
              [900, 500]
            ],
          },
          {
            coords: [
              [50, 550],
              [1000, 350]
            ]
          },
          {
            coords: [
              [50, 400],
              [1000, 150]
            ]
          }
        ]
      }
    ]

  };
  chart.setOption(option);
}

</script>

<style scoped>

.lines_chart {
  width: 100%;
  height: 650px;
}

</style>